<template>
  <el-dialog
    class="stock_dialog"
    width="900px"
    title="修改库存"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
  >
    <div class="warn-box">
      <svg-icon
        style="margin-right:17px"
        icon-class="warn"
        :size="20"
      />
      <p> 温馨提示：请如实填写库存信息，以确保商品可以在承诺发货时间内发出，避免可能的物流违规</p>
    </div>
    <el-table
      :data="tableData"
      border
    >
      <el-table-column
        align="center"
        prop="title"
        label="套餐信息"
      />
      <el-table-column
        align="center"
        prop="price"
        label="套餐租金"
      />
      <el-table-column
        align="center"
        prop="quantity"
        label="当前库存"
      />
      <el-table-column
        align="center"
        label="库存增减"
        width="200"
      >
        <template slot-scope="scope">
          <div class="flex align-center">
            <el-radio-group
              v-model="scope.row.type"
              size="mini"
              @change="handleChange(scope.row)"
            >
              <el-radio-button label="add">增</el-radio-button>
              <el-radio-button label="minus">减</el-radio-button>
            </el-radio-group>
            <el-input
              class="flex-1"
              style="margin-left:10px"
              v-model="scope.row.add"
              placeholder="请输入"
              @change="handleChange(scope.row)"
              @input="val=>changeNumberInput(scope.row, val)"
            ></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="改后库存"
        prop="stock"
      />
    </el-table>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        size="small"
        @click="dialogVisible = false"
      >取 消</el-button>
      <el-button
        size="small"
        type="primary"
        @click="submit"
      >保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getSetmealStock, editGoodsStock } from "@/api/goods";
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      editId: null
    }
  },
  methods: {
    handleChange(row) {
      const value = row.add ? (parseInt(row.quantity) + (row.type === 'add' ? parseInt(row.add) : -parseInt(row.add))) : '';
      this.$set(row, 'stock', value);
    },
    changeNumberInput(row, value) {
      const pattern = /^[1-9][0-9]*$/ // 正整数的正则表达式
      // 不符合正整数时
      if (!pattern.test(value)) {
        // input 框绑定的内容为空
        row.add = ''
      }
    },
    submit() {
      const setmeal = this.tableData.map(item => {
        return {
          id: item.id,
          stock: item.stock || item.quantity
        }
      })
      editGoodsStock({ goods_id: this.editId, setmeal }).then(res => {
        this.dialogVisible = false;
        this.$emit('getList', true);
      })
    },
    getData() {
      getSetmealStock(this.editId).then(res => {
        this.tableData = res ? res.map(item => { return { ...item, type: 'add', add: '' } }) : [];
      })
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getData();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.stock_dialog {
  /deep/.el-radio-button__inner {
    padding: 5px;
    font-size: 14px;
    border: 1px solid #666666;
    color: #666666;
  }
  /deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: #ffffff;
    background-color: #666666;
    box-shadow: -1px 0 0 0 #666666;
  }
  /deep/.el-radio-button__inner:hover {
    color: #666666;
  }
}
</style>
